<template name="indexSwiper">
	<swiperDot :current="current" :dotsOption="dotsStyles" :list="swiperList">
		<swiper class="swiperContter" :autoplay="swiperOption.autoPlay" :interval="swiperOption.interval" :style="{height:swiperOption.swiperHeight+'px'}"
		 @change="slideSwip">
			<swiper-item class="swiperSlide" v-for="(item,index) in swiperList" :key="index" :style="{borderRadius:swiperOption.borderRadius+'px'}">
				<image class="swiperImg" :src="item.url" :data-type="item.linkType" :data-id="item.linkId" :data-link="item.linkUrl"
				 :style="{height:swiperOption.swiperHeight+'px'}" @tap="indexSwiperJump"></image>
			</swiper-item>
		</swiper>
	</swiperDot>
</template>

<script>
	import swiperDot from "@/components/swiperDot/swiperDot.vue";
	import Request from "@/sdk/pocky-request/index.js";
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		components: {
			swiperDot
		},
		name: 'indexSwiper', //组件名称
		computed: {
			...mapState({
				locationCity: state => state.map.locationCity,
				selectCity:state=>state.map.selectCity
			})
		},
		props:{
			hasFresh:{
				type:Boolean,
				default:false
			},
			list:{
				type:Array,
				default:function(){
					return [{
					"id": 8,
					"type": 1,
					"linkType": 4,
					"linkUrl": "https://www.baidu.com/",
					"url": "../../static/loding.png",
					"name": "",
					"status": 0,
					"sold": 0
				}, {
					"id": 1,
					"type": 1,
					"linkType": 1,
					"linkId": 65,
					"url": "../../static/loding.png",
					"name": "轮播商品",
					"status": 0,
					"price": 1,
					"sold": 0
				}, {
					"id": 4,
					"type": 1,
					"linkType": 1,
					"linkId": 22,
					"linkUrl": "",
					"url": "../../static/loding.png",
					"name": "测试课程",
					"status": 0,
					"price": 455.9,
					"sold": 0
				}]
				}
			}
		},
		// 组件参数
		data() {
			return {
				current: 0,
				swiperOption: {
					autoPlay: false,
					interval: 3000,
					borderRadius: 10,
					swiperHeight: parseInt((uni.getSystemInfoSync().screenWidth - uni.upx2px(56)) / (960 / 300))
				},
				swiperList: [{
					"id": 8,
					"type": 1,
					"linkType": 4,
					"linkUrl": "https://www.baidu.com/",
					"url": "../../static/loding.png",
					"name": "",
					"status": 0,
					"sold": 0
				}, {
					"id": 1,
					"type": 1,
					"linkType": 1,
					"linkId": 65,
					"url": "../../static/loding.png",
					"name": "轮播商品",
					"status": 0,
					"price": 1,
					"sold": 0
				}, {
					"id": 4,
					"type": 1,
					"linkType": 1,
					"linkId": 22,
					"linkUrl": "",
					"url": "../../static/loding.png",
					"name": "测试课程",
					"status": 0,
					"price": 455.9,
					"sold": 0
				}],
				dotsStyles: {
					activeStyle: {
						width: 20,
						height: 8,
						borderRadius: 4,
						backgroundColor: '#ffcd11',
						border: 'none',
						color: ''
					}
				},

			}
		},
		watch:{
			locationCity(newVal){
				this.getData();
			},
			selectCity(newVal){
				this.getData();
			},
			hasFresh(newVal){
				if(!newVal){
					this.getData()
				}
			}
		},
		// 组件方法
		methods: {
			slideSwip: function(e) {
				this.current = e.detail.current
			},
			indexSwiperJump(e) {
				let type = e.currentTarget.dataset.type
				let _id = e.currentTarget.dataset.id
				if (type == 1) { //课程详情
					this.toPage({
						url: 'goodDetail',
						id: _id
					})
				} else if (type == 2) { //门店详情
					this.toPage({
						url: 'shopDetail',
						id: _id
					})
				} else { //其他
					this.toPage({
						url: e.currentTarget.dataset.link,
					})
				}
			},
			getData() {
				let areaId = this.selectCity.cityCode;
				Request().request({
					url: '/mall/recom/banner.do',
					method: 'post',
					data: {
						"channel": 0,
						"areaId": areaId
					}
				}).then(res => {
					if (res.data.result == 1) {
						this.swiperList = res.data.data

					} else {
						// uni.showToast({
						// 	title: '购物车数据获取失败,'+res.data.msg,
						// 	icon: 'none'
						// });

					}
				})
			}
		},
		created() {
			setTimeout(() => {
				this.getData()
			}, 100)
		},
	}
</script>

<style lang="less">
	@import "../../common/public.less";

	.swiperContter {
		width: 100%;
		transition: all 0.3s;
	}

	.swiperImg {
		width: 100%;
		display: block;
	}

	.swiperSlide {
		overflow: hidden;
	}
</style>
